<template>
  <transition name="gouwu">
    <div class="gou-wu" v-show="gouwuactive">
  <div class="gou-gb animate__animated" :class="isgouBd? 'animate__fadeIn' : 'animate__fadeOut'" aria-label="弹层背景" ></div>
      <div class="gou-wuContent">
          <div class="gouwuTop">
              <i class="gouwuImg">
                  <img :src="gouWuList.topImag" alt="">
              </i>
              <div class="guowu-title">
                  <span>{{ gouWuList.title }}</span>
              </div>
              <div class="gouwu-price">
                  <span class="price">{{ gouWuList.jiage }}</span>
              </div>
              <div class="btnxiaos">
                  <a class="btn" href="xx" role="button" @click.prevent="Gwcxiaos">
                      <img src="~assets/images/detail/quxiao.png" alt="">
                  </a>
              </div>
           </div>

           <div class="gouwuzhongj">

           </div>

           <div class="gouwuShuliang">
                
           </div>
           <div class="gouwuBottom">
               
             <div class="btn">
               <a class="ok" role="button" @click.prevent="getaddgouwu">
                   <p>确定</p>
               </a>
             </div>
           </div>
      </div>
    
    </div> 
  </transition>
</template>

<script>

export default {
    name: 'DetailGouWuTianJia',
    data(){
      return {
        gouwuactive: false,
        isgouBd: false
      }
    },
    props: {
        gouWuList: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    methods: {
      // 向父组件发送购物车弹窗事件
        Gwcxiaos() {
            this.$emit('gwcxiaos')
        },
      // 购物车添加信息事件 
        getaddgouwu() {
           this.$emit('getaddgouwu')
        }
    }
}
</script>

<style>

/* 定义进入和离开时候的过渡状态 */
 .gouwu-enter-active,
 .gouwu-leave-active {
   transition: all 0.5s ease;
   position: absolute;
 }

 /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
 .gouwu-enter,
 .gouwu-leave-to {
   opacity: 0;
   transform: translateY(640px);
 }

/*  css动画效果持续时间设置 */
  .animate__animated.animate__fadeIn{
     --animate-duration: 0.3s;
  }
  .animate__animated.animate__fadeOut{
     --animate-duration: 0.3s;
  }
  .gou-wu{
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    z-index: 1000;
    width: 100%;
    height: 100%;
  }
  .gou-wu .gou-gb{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
  }
  .gou-wu .gou-wuContent{
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 20%;
     background-color: #fff;
  }
  .gou-wu .gouwuTop{
    padding: 10px 0 18px 126px;
    position: relative;
  }
  .gou-wu .gouwuTop .gouwuImg{
    width: 100px;
    height: 100px;
    position: absolute;
    top: -28px;
    left: 10px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.1);
    padding: 1px;
    background-color: #fff;
  }
  .gou-wu .gouwuTop .gouwuImg img{
      width: 100%;
      height: 100%;
  }
  .gou-wu .gouwuTop .guowu-title {
    color: #051b28;
    font-size: 13px;
    width: 160px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap; 
    overflow: hidden;
    padding-right: 20px;
    padding-bottom: 5px;
    
  }
  .gou-wu .gouwuTop .gouwu-price {  
    color: #FF0036;
    font-size: 16px;
    font-family: arial;
    word-wrap: break-word;
  }
   .gou-wu .gouwuzhongj {
       height: 120px;
       padding: 0 15px 10px; 
   }
   .gou-wu .gouwuShuliang {
       height: 80px;
       padding: 0 15px 10px; 
   }
   .gou-wu .gouwuBottom{
       display: flex;
       height: 135px;
   }
   .gou-wu .gouwuBottom .btn{
    display: block;
    display: -webkit-box;
    display: flex;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #FFF;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
   }
   .gou-wu .gouwuBottom .btn .ok{
   display: block;
    font-size: 15px;
    line-height: 50px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #fff;
    background-color: #FF0036;
    }
    .btnxiaos{
      position: absolute;
      top: 8px;
      right: 10px;
    }
    .btnxiaos .btn{
        width: 20px;
        height: 20px;
    }
    .btnxiaos .btn img{
       width: 100%;
       height: 100%;
    }
</style>